import type { Proptype, Result } from './types';
import { ref, reactive } from 'vue';
import * as echarts from 'echarts/core';
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import { GraphChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
export default function () {
  echarts.use([TitleComponent, TooltipComponent, LegendComponent, GraphChart, CanvasRenderer]);
  // 传参
  const props = ref<Result[]>([]);
  const propValue = (value: Proptype) => {
    props.value = value.data;
    console.log(props.value);
  };
  // 变量
  const bloodTiesChartRef = ref(null);
  const bloodTiesChart: any = null;
  const edgesData = reactive([]);
  const optionData = ref([]);
  // 初始化
  const initEchart = () => {
    const bloodTiesChart = echarts.init(bloodTiesChartRef.value);
    const option = {
      series: [
        {
          type: 'graph',
          layout: 'force',
          label: {
            show: true,
            position: 'inside',
            formatter: '{b}', // 显示节点名称
            color: '#394D73',
            fontSize: 14
          },
          symbolSize: 156, // 设置节点大小
          // zoom: 2,  // 设置图像的缩放
          roam: true,
          force: {
            repulsion: 10000 // 用于控制节点之间的排斥力
          },
          lineStyle: {
            width: 2, // 这里设置连线的粗度
            color: '#465A80'
          },
          edgeSymbol: ['arrow'],
          data: optionData.value,
          edges: edgesData
        }
      ]
    };
    console.log(bloodTiesChart);
    bloodTiesChart && bloodTiesChart.setOption(option);
  };
  // 配置
  const setOption = () => {
    if (props.value && props.value.length > 0) {
      optionData.value = props.value.map((v: any) => {
        if (v.currently) {
          v.itemStyle = {
            color: '#FFC5C5',
            borderColor: '#FE7F7F',
            borderWidth: 2
          };
        } else {
          switch (v.type) {
            case '普通资源':
              v.itemStyle = {
                color: '#FFD4B0',
                borderColor: '#FDAA65',
                borderWidth: 2
              };
              break;
            case '资产':
              v.itemStyle = {
                color: '#AEC5FF',
                borderColor: '#4C7FFE',
                borderWidth: 2
              };
              break;
            case '根资源':
              v.itemStyle = {
                color: '#B6EFD0',
                borderColor: '#54DB98',
                borderWidth: 2
              };
              break;
          }
        }
        if (v.parent_id?.length > 0) {
          v.parent_id.map((s: any) => {
            edgesData.push({
              source: v.id.toString(),
              target: s.toString()
            } as never);
          });
        }
        v.id = v.id.toString();
        return v;
      }) as never;
    }
  };
  return {
    propValue,
    bloodTiesChartRef,
    bloodTiesChart,
    initEchart,
    setOption
  };
}
